<template>
  <FormItemRest>
    <Row :gutter="[8, 8]">
      <Col :span="10">
        <Input
          v-model:value="ipStart"
          :maxlength="15"
          @focus="focusIpInput"
          @blur="blurIpInput"
          placeholder="请输入ip起始地址"
        />
      </Col>
      <Col :span="2" class="flex justify-center items-center">~</Col>
      <Col :span="10">
        <Input
          v-model:value="ipEnd"
          :maxlength="15"
          @focus="focusIpInput"
          @blur="blurIpInput"
          placeholder="请输入ip结束地址"
        />
      </Col>
      <Col :span="2" class="flex justify-center items-center">
        <PlusCircleOutlined
          :style="{ fontSize: '20px', cursor: 'pointer' }"
          @click="handleAdd"
        />
      </Col>
      <Col :span="24" v-if="dataSoure?.length > 0">
        <Table :scroll="{ y: 400 }" :dataSource="dataSoure" :pagination="false">
          <TableColumn dataIndex="ipStart" title="起始IP" align="center" />
          <TableColumn dataIndex="ipEnd" title="结束IP" align="center" />
          <TableColumn
            dataIndex="action"
            title="操作"
            align="center"
            :width="100"
          >
            <template #default="{ record, index }">
              <b-button icon="del" type="link" @click="handleDelete(index)"
                >删除</b-button
              ></template
            >
          </TableColumn>
        </Table></Col
      >
    </Row>
  </FormItemRest>
</template>
<script setup lang="tsx">
import { ref } from 'vue';
import { PlusCircleOutlined } from '@ant-design/icons-vue';
import {
  Col,
  FormItemRest,
  Input,
  Row,
  Table,
  TableColumn,
  message,
} from 'ant-design-vue';
import { validatorIp } from '@/utils/validate';

defineOptions({
  name: 'inputIp',
});

interface Props {
  list: Array<any>;
}
const props = defineProps<Props>();
const ipStart = ref('');
const ipEnd = ref('');
const dataSoure = ref([]);
dataSoure.value = props.list;
const handleDelete = (index: any) => {
  dataSoure.value.splice(index, 1);
};
const handleAdd = () => {
  if (dataSoure.value.length >= 50) {
    message.warning('最多只能添加50个ip段');
    return;
  }
  if (ipStart.value && ipEnd.value) {
    const ipItem = {
      ipStart: ipStart.value,
      ipEnd: ipEnd.value,
    };
    let isAdd = true;
    dataSoure.value.forEach((item) => {
      const itemIpStart = item.ipStart.split('.');
      const itemIpEnd = item.ipEnd.split('.');
      const NetworkSegment = `${itemIpStart[0]}.${itemIpStart[1]}.${itemIpStart[2]}`;
      const ipStartPort = itemIpStart[3];
      const ipEndPort = itemIpEnd[3];

      const addIpStart = ipItem.ipStart.split('.');
      const addNetworkSegment = `${addIpStart[0]}.${addIpStart[1]}.${addIpStart[2]}`;
      const addIpStartPort = addIpStart[3];
      if (NetworkSegment === addNetworkSegment) {
        if (
          !(
            parseInt(addIpStartPort) > parseInt(ipEndPort) ||
            parseInt(addIpStartPort) < parseInt(ipStartPort)
          )
        ) {
          isAdd = false;
          return;
        }
      }
    });
    if (isAdd) {
      dataSoure.value.unshift(ipItem);
      ipStart.value = '';
      ipEnd.value = '';
    } else {
      message.warning('请检查ip段是否重复');
    }
  } else {
    message.warning('IP地址不能为空');
  }
};
const focusIpInput = () => {
  if (!ipStart.value && ipEnd.value) {
    ipStart.value = ipEnd.value;
  } else if (!ipEnd.value && ipStart.value) {
    ipEnd.value = ipStart.value;
  }
};
const blurIpInput = () => {
  if (ipStart.value && !validatorIp(ipStart.value)) {
    message.error('开始IP格式不正确');
    ipStart.value = '';
    return;
  }
  if (ipEnd.value && !validatorIp(ipEnd.value)) {
    message.error('结束IP格式不正确');
    ipEnd.value = '';
    return;
  }
  if (ipStart.value && ipEnd.value) {
    const startIp = ipStart.value.split('.');
    const endIp = ipEnd.value.split('.');
    if (!(startIp.slice(0, 3).join() === endIp.slice(0, 3).join())) {
      message.error('开始IP和结束IP必须在同一网段');
      ipEnd.value = '';
      return;
    }
    if (Number(startIp[3]) > Number(endIp[3])) {
      message.error('结束IP主机号要大于等于开始IP主机号');
      ipEnd.value = '';
      return;
    }
  }
};
</script>
